<template>
  <div id="app">
    <mt-header title="标题" fixed>
      <mt-button icon="back" slot="left">返回</mt-button>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <mt-index-list class="list">
      <!-- <mt-index-section index="A">
        <mt-cell title="Aaron"></mt-cell>
        <mt-cell title="Albro"></mt-cell>
        <mt-cell title="Acdef"></mt-cell>
      </mt-index-section> -->
      <mt-index-section v-for="item in message" :index="item.index" :key="item.id">
        <mt-cell v-for="i in item.user" :title="i.name" :key="i.id" @click.native="telAlert(i.tel)"></mt-cell>
      </mt-index-section>
    </mt-index-list>
  </div>
</template>

<script>
  var message = [
      {
        "index": "B",
        "user": [
          {"name": "爸爸", "tel": "13111111111"},
        ]
      },
      {
        "index": "C",
        "user": [
          {"name": "朝林哥", "tel": "13111111114"},
          {"name": "陈慧明", "tel": "13111111115"}
        ]
      },
      {
        "index": "D",
        "user": [
          {"name": "大爸", "tel": "13111111117"},
        ]
      },
      {
        "index": "L",
        "user": [
          {"name": "李文杰", "tel": "13111111120"},
          {"name": "李国文", "tel": "13111111121"},
          {"name": "李玉红", "tel": "13111111122"},
          {"name": "李志军", "tel": "13111141120"},
          {"name": "廖小康", "tel": "13111211121"},
          {"name": "刘何波", "tel": "13981111122"},
          {"name": "刘美佳", "tel": "13711111120"},
          {"name": "遛狗", "tel": "13171111121"}
        ]
      },
      {
        "index": "M",
        "user": [
          {"name": "妈妈", "tel": "13111111123"},
          {"name": "马丽", "tel": "13111111124"}
        ]
      },
      {
        "index": "F",
        "user": [
          {"name": "范冰冰", "tel": "13111111126"},
          {"name": "范玮琪", "tel": "13111111127"},
          {"name": "范新宇", "tel": "13111111128"}
        ]
      }
    ];
  import {MessageBox} from 'mint-ui';
export default {
  name: 'app',
  data () {
    return {
      message: message
    }
  },
  methods: {
    telAlert (tel) {
      MessageBox({
        title: '呼叫',
        message: tel,
        showCancelButton: true
      })
    }
  }
}
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .list {
    margin-top: 40px;
  }
</style>
